<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Search from "@/components/Search/index.vue";
import PageNum from "@/components/PageNum/index.vue";
import TopInfo from "@/components/TopInfo/index.vue";
import getPlevel from "@/utils/level";
import {
  delupdateplan,
  getupdateplanlist,
  onlineupdateplan,
  addupdateplan,
  getsoftwareList,
} from "@/api/machine_software";
import addplan from "@/views/machine/software/updateplan/addupdateplan.vue";
let isDesc = ref(false)
let descData = ref('')
let data = reactive({
  mtloading: false, // 加载
  dialogVisible: false, // 弹窗
  title: "", // 弹窗标题
  type: "", // 弹窗类型
  list: [], // 列表信息
  lookup: [
    // 筛选栏
    { title: $t('log.version'), type: "input", value: "", key: "version_no" },
    { title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
    { title: $t('date.releaseTimes'), type: "picker", value: "", key: "publish_time" },
  ],
  obj: {
    // 添加/修改数据
    version_no: "",
    path: "",
    size: "",
    desc: "",
    mv_id: "",
    mvp_id: "", //更新计划ID
    status: "",
  },
  group: {
    // 筛选数据
    version_no: "",
    page: 1,
    pageNum: 15,
  },
  total: 0, // 总条数
});
let onDesc = (row) => {
  if (row.desc) {
    isDesc.value = true
    descData.value = row.desc
    descData.value = descData.value.replace(/\n/g, '<br>')
  }
}
// 查询回调
let inves = (e) => {
  for (let key in e) {
    data.group[key] = e[key];
  }
  data.group.page = 1;
  data.group.pageNum = 15;
  getlist();
};
// 页数回调
let current = (e) => {
  data.group.page = e;
  getlist();
};
//增加设备软件更新计划列表

let add = (e) => {
  for (let key in data.obj) {
    data.obj[key] = e[key];
  }
  data.title = $t('machine.software.updatePlan');
  data.type = "updateplan";
  data.dialogVisible = true;
};

// 上下架更新任务
let setstatus = (e) => {
  if (e.status == 4) {
    e.statuss = 1
  }
  if (e.status == 1) {
    e.statuss = 4
  }
  e.btnstatus = true;
  let obj = {
    mvp_id: e.mvp_id,
    status: e.statuss,
  };
  ElMessageBox.confirm($t('message.softwareOn'))
    .then((res) => {
      onlineupdateplan(obj).then((res) => {
        e.btnstatus = false;
        if (res.state == 200) {
          ElMessage({
            message: $t('message.operateSuccess'),
            type: "success",
          });
          getlist();
        }
      });
    })
    .catch((err) => {
      getlist();
      return;
    })

}

let plan = (e) => {
  if (e == false) {
    data.dialogVisible = false;
    return;
  }
  addupdateplan(e).then((res) => {
    if (res.state == 200) {
      ElMessage({
        message: $t('message.addSuccess'),
        type: "success",
      });
      data.dialogVisible = false;
      getlist();
      return;
    }
    ElMessage({
      message: $t('message.networkFailed'),
      type: "error",
    });
  });
};
let getlist = () => {
  data.mtloading = true;

  getupdateplanlist(data.group)
    .then((res) => {
      data.mtloading = false;
      if (res.state == 200) {
        data.list = res.data.data;
        data.total = res.data.total;
      }
    })
    .catch((err) => {
      data.mtloading = false;
    });
};

// 删除分组信息
let del = (e) => {
  ElMessageBox.confirm($t('message.deliInfo'))
    .then((res) => {
      delupdateplan({ mvp_id: e }).then((res) => {
        if (res.state == 200) {
          ElMessage({
            message: $t('message.delSuccess'),
            type: "success",
          });
          getlist();
          return;
        }
        ElMessage({
          message: $t('message.networkFailed'),
          type: "error",
        });
      });
    })
    .catch((err) => {
      console.log("取消");
    });
};
getlist();
let setStatus = (row, flag) => {
  if (row.status == 1) {
    row.statusCn = $t('public.Waiting');
  }
  if (row.status == 2) {
    row.statusCn = $t('public.updated');
  }
  if (row.status == 3) {
    row.statusCn = $t('message.updateFailed');
  }
  if (row.status == 4) {
    row.statusCn = $t('public.remove');
    row.className = "color";
  }
  if (row.status == 4 && flag == 2) {
    return row.statussCn = $t('goods.corner.removed')
  }
  return row.statusCn;
};

const versionList = ref([]);
const getVersionList = () => {
  getsoftwareList({}).then(res => {
    versionList.value = res.data.map(item => {
      return {
        label: item.version_no,
        value: item.mv_id
      }
    })
  })
}
getVersionList()
</script>

<template>
  <div class="app-container">
    <TopInfo />
    <Search :lookup="data.lookup" @investigate="inves" />
    <el-button v-prmis="'version_plan_add'" type="primary" size="small" @click="add">
      <template #default>
        <span class="text-sm"> {{ $t('machine.software.updatePlan') }}</span>
      </template>
    </el-button>

    <div class="app-container" v-loading="data.mtloading">
      <el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }" class="w-full" height="700">
        <el-table-column prop="mv_id" :label="$t('machine.software.SoftwareID')" sortable show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.mv_id || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="version_no" :label="$t('log.version')" sortable show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.version_no || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="original_version" :label="$t('log.originalVersion')" sortable show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.original_version || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="desc" :label="$t('machine.software.version')" sortable show-overflow-tooltip>
          <template #default="scope">
            <el-icon :color="scope.row.desc ? '#409Eff' : ''" @click="onDesc(scope.row)">
              <Document />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="size" :label="$t('machine.software.file')" sortable show-overflow-tooltip>
          <template #default="scope">
            {{ getPlevel.measure(scope.row.size, 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="machine_id" :label="$t('machine.code')" sortable show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.machine_id || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="update_time" :label="$t('date.updateTime')" sortable show-overflow-tooltip>
          <template #default="scope">
            {{ getPlevel.gettime(scope.row.update_time, 3) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('public.state')" sortable show-overflow-tooltip>
          <template #default="scope">
            <span :class="scope.row.status == 1 ? 'sz-color' : ''">
              {{ setStatus(scope.row, 1) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('machine.software.Up')">
          <template #default="scope">
            <el-tag type="primary" :class="scope.row.className ? 'cursor-pointer bg-color' : 'cursor-pointer'"
              @click="setstatus(scope.row)">
              {{ setStatus(scope.row, 2) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="download_progress" :label="$t('machine.custom.progress')" width="100">
          <template #default="scope">
            <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.download_progress"
              status="exception" />
          </template>
        </el-table-column>

        <el-table-column :label="$t('public.operate')">
          <template #default="scope">
            <el-button v-prmis="'version_plan_del'" type="danger" size="small" @click="del(scope.row.mvp_id)"
              :title="$t('machine.software.Delete')">{{ $t('public.del') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <PageNum :total="data.total" :page="data.group" @exposeData="current" />
    <el-dialog v-if="data.dialogVisible" v-model="data.dialogVisible" :width="'30%'" :style="'margin-top: 80px;'"
      :title="data.title" center>
      <addplan :updateplan="data.list" :version="versionList" @plan="plan" />
    </el-dialog>
    <!-- 详情 -->
    <el-dialog v-model="isDesc" :title="$t('public.details')" center width="600" destroy-on-close @close="isDesc = false" append-to-body>
      <p v-html="descData"></p>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.bg-color {
  background: #dcdfe6;
  color: #ffffff;
  border: none;
}

.sz-color {
  color: #409EFF;
}

//状态，1：待更新，2：已更新，3：更新失败，4：下架</style>
